<template>
  <div>
    <div>
      <el-breadcrumb separator=" ">
        <el-breadcrumb-item>老人姓名 <el-input style="width: 180px" placeholder="请输入老人姓名" /></el-breadcrumb-item>
        <el-breadcrumb-item>档案号 <el-input style="width: 180px" placeholder="请输入入住号" /></el-breadcrumb-item>
        <el-breadcrumb-item>老人身份证 <el-input style="width: 180px" placeholder="请输入老人姓名" /></el-breadcrumb-item>
        <el-breadcrumb-item>老人状态 <el-select placeholder="听力完好" size="large" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="width: 1100px;  position: relative;">
      <el-breadcrumb separator=" ">
        <el-breadcrumb-item>余额不足 <el-select placeholder="请选择" size="large" style="width: 240px">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
          </el-select></el-breadcrumb-item>
        <el-breadcrumb-item>余额不足 <el-button type="primary" round
            style="width: 120px; height: 40px;">导出</el-button></el-breadcrumb-item>
        <el-button style=" position: absolute; top:8px ; right: 45px;" type="primary" round>查询</el-button>
      </el-breadcrumb>

    </div>
    在家管理
    <div class="conter">
      <div
        style="width: 110px; height: 30px; background-color:rgb(239, 102,102);  position: absolute; top: -30px; left: 105px ; text-align: center; ">
        <span style="color: aliceblue; line-height: 30px;">金凤区</span>
      </div>
      <div style="width: 214px; height: 224px ; border: 1px solid saddlebrown; display: flex; position: relative;">
        <div>
          <div style="width: 150px;">
            <p class="statelement">时间跨度咖手机客户端嘎洒科技大干撒</p>
          </div>
          <div>
            <el-button style="position: absolute;right: 0px;top: 0px;" type="primary" round>居家</el-button>
          </div>
          <div style="display: flex; flex-direction: column; gap: 10px;">
            <p>入住号:232323</p>
            <p>上门服务:3次</p>
            <p>检查:1次</p>
          </div>
          <div style="position: absolute;left: 70px;top: 55px;">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="70" :src="circleUrl" />
                </div>
                <div v-for="size in sizeList" :key="size" class="block">
                  <el-avatar :size="size" :src="circleUrl" />
                </div>
              </div>
            </el-col>
          </div>
          <div>
            <p style="display: flex;gap: 10px; position: absolute;left: 60px;top: 125px;">
              <span>桂花</span><span>女</span><span>75</span>
            </p>
            <p style="display: flex;gap: 10px; position: absolute;left: 60px;top: 160px;">
              <el-button type="primary" style="background-color:crimson;">4级护照</el-button>
            </p>
          </div>
        </div>

      </div>

    </div>

  </div>
</template>



<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: '听力完好',
    label: '听力完好',
  },
  {
    value: '轻度受损',
    label: '轻度受损',
  },
  {
    value: '中度受损',
    label: '中度受损',
  },
  {
    value: '重度受损',
    label: '重度受损',
  },
]
const option = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '医疗储备金不足',
    label: '医疗储备金不足',
  },
  {
    value: '护照储备金不足',
    label: '护照储备金不足',
  },

]
</script>

<style scoped>
.statelement {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.conter {
  width: 80%;
  height: 500px;
  margin: auto;
  position: relative;
  top: 46px;
}
</style>